<template>
  <view>
    <u-navbar title="评价" back-icon-size="34" title-size="36" :border-bottom="false" title-color="#222222" back-icon-color="#222222"></u-navbar>
    <view class="" style="margin-top: 20rpx; background: #fff; width: 100%">
      <!-- 人 -->
      <view class="" style="display: flex; align-items: flex-start; justify-content: space-between; padding-top: 34rpx">
        <view class="" style="display: flex; align-items: center; padding: 15rpx 0 30rpx 30rpx">
          <image :src="evaluate.avatar" mode="aspectFill" style="width: 79rpx; height: 79rpx; border-radius: 50%"></image>
          <view class="" style="padding-left: 18rpx; font-size: 28rpx">
            <view class="">
              {{ evaluate.nickname }}
            </view>
            <view class="" style="font-size: 26rpx; color: #666666">
              <text>已购商品：{{ evaluate.goods_name }}</text>
            </view>
          </view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-right: 30rpx">
          {{ evaluate.create_time_text }}
        </view>
      </view>

      <view class="" style="padding: 0 31rpx; font-size: 28rpx">
        {{ evaluate.content }}
      </view>
      <view class="" style="padding: 15rpx 30rpx; display: flex; padding-bottom: 58rpx">
        <image :src="img_url + m" mode="" style="width: 200rpx; height: 200rpx; border-radius: 20rpx; margin-right: 20rpx" v-for="m in evaluate.images"></image>
      </view>
      <view class="" style="padding-left: 34rpx; display: flex; align-items: center; justify-content: space-between">
        <view class="">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/xing.png" mode="" style="width: 28rpx; height: 28rpx; margin-right: 10rpx" v-for="n in evaluate.star"></image>
        </view>

        <view class="" style="font-size: 26rpx; color: #999999; padding-right: 34rpx">浏览量：{{ evaluate.views }}</view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: flex-end; margin-right: 28rpx; font-size: 28rpx; padding-bottom: 20rpx">
        <view class="">
          {{ evaluate.eva_count }}
        </view>
        <image src="https://wenzhen.jiangkukeji360.com/static/shop/pl.png" mode="" style="width: 28rpx; height: 28rpx; margin-left: 8rpx"></image>
      </view>
    </view>
    <!-- 评论 -->
    <view class="" style="margin-top: 20rpx; background: #fff" v-for="(i, k) in childs" :key="k">
      <view class="" style="display: flex; align-items: center; padding: 39rpx 0 28rpx 30rpx">
        <image :src="i.avatar" mode="aspectFill" style="width: 79rpx; height: 79rpx; border-radius: 50%"></image>
        <view class="" style="padding-left: 25rpx">
          <view class="" style="font-size: 28rpx">
            {{ i.nickname }}
          </view>
          <view class="" style="font-size: 24rpx; color: #999999">
            {{ i.create_time_text }}
          </view>
        </view>
      </view>
      <view class="" style="font-size: 26rpx; padding-left: 29rpx; padding-bottom: 20rpx">
        {{ i.content }}
      </view>
    </view>
    <!-- 聊天 -->
    <view
      class=""
      style="
        width: 100%;
        height: 98rpx;
        background: #ffffff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 0 28rpx;
      "
    >
      <input
        type="text"
        v-model="value"
        placeholder="输入聊天内容"
        style="width: 596rpx; height: 76rpx; background: #eeeeee; border-radius: 38rpx; font-size: 28rpx; padding-left: 39rpx"
      />
      <view class="" style="font-size: 28rpx; padding-left: 20rpx" @tap="send">发送</view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      value: '',
      id: null,
      page: 1,
      evaluate: {},
      childs: []
    };
  },
  //方法
  methods: {
    pjpl() {
      this.api({
        url: '/api/shop/evaluateDetails',
        method: 'post',
        data: {
          evaluate_id: this.id,
          page: this.page
        }
      }).then((res) => {
        this.evaluate = res.data.evaluate;
        this.childs = this.childs.concat(res.data.childs);
        this.page++;
      });
    },
    send() {
      if (this.value == '') {
        uni.showToast({
          title: '请输入评价内容',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/shop/addEva',
          method: 'post',
          data: {
            type: 1,
            content: this.value,
            evaluate_id: this.id
          }
        }).then((res) => {
          this.page = 1;
          this.childs = [];
          this.pjpl();
          this.value = '';
        });
      }
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.pjpl();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
